<template>
  <ScalablePage>
    <div class="big-screen aqgl flex-between" style="width: 480px; overflow: hidden;">
      <!-- 屏幕右边-->
      <div class="screen-right">
        <div class="sum-risks">
          <div class="screen-title-container-l1">
            <img src="@/assets/aqgl/screen-title03.png" alt="" class="screen-title" />
            <div class="screen-title-text-l1">更多</div>
          </div>
          <div style="
            width: 475px;
              display: flex;
              flex-flow: row;
              flex-direction: row;
              align-items: center;
              justify-content: flex-start;
              margin-top: 20px;
              font-size: 14px;
            ">
            <div
              style="display: flex;flex-direction: row; width: 231px; flex-wrap: nowrap;align-items: center;margin-right: 20px;color: #20e5de;}">
              <img style="width: 80px; height: 80px;" src="@/assets/aqgl/top1.png" alt="" class="screen-title" />
              <div>
                <p style="color: #fff; font-size: 14px;margin-bottom: 10px;">安全隐患总事件</p>
                <div>
                  <p>总事件：{{ zongshu_value }}</p>
                  <p>安全隐患：{{ yinhuan_value }}</p>
                </div>
              </div>
            </div>
            <div
              style="display: flex;flex-direction: row; width: 231px; flex-wrap: nowrap; align-items: center; color: #16e69a;">
              <img style="width: 80px; height: 80px;" src="@/assets/aqgl/top2.png" alt="" class="screen-title" />
              <div>
                <p style="color: #fff; font-size: 14px;margin-bottom: 10px;">安全隐患整改完成率</p>
                <div>
                  <p>完成率：{{ wancheng_value }}</p>
                  <p>安全隐患：{{ num_value }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="safe-data">
          <div class="screen-title-container-l1">
            <img src="@/assets/aqgl/screen-title04.png" alt="" class="screen-title" />
            <div class="screen-title-text-l1">更多</div>
          </div>
          <div class="safe-chart" id="monthChart"></div>
          <div style="margin-top: 20px; color: #fff; margin-left:20px; font-weight:600">
            工艺间安全风险
          </div>
          <div class="safe-chart" id="areaChart"></div>
        </div>
        <div class="camera-statistics">
          <img src="@/assets/changcheng/erjibiaoti.png" alt="" />
          <div>摄像头统计</div>
        </div>
        <div class="status-bar-wrapper">
          <!-- 图例 -->
          <div class="legend">
            <div class="legend-item">
              <span class="legend-color online"></span> 在线
            </div>
            <div class="legend-item">
              <span class="legend-color offline"></span> 离线
            </div>
          </div>

          <!-- 状态条 -->
          <div class="bar-container">
            <div class="bar-segment online" :style="{ width: `${onlinePercent}%` }"></div>
            <div class="bar-segment offline" :style="{ width: `${offlinePercent}%` }"></div>
            <div class="bar-total">共 {{ totalNum }}台</div>
          </div>

          <!-- 底部文字 -->
          <div class="bar-labels">
            <span>在线 {{ online }}台</span>
            <span>离线 {{ offline }}台</span>
          </div>
        </div>
      </div>
    </div>
  </ScalablePage>
</template>
<script setup lang="ts">
import ScalablePage from "@/components/ScalablePage.vue"; // 引入组件自适应
import * as echarts from "echarts";
import { onMounted, ref, reactive, computed } from "vue";

import { totalHiddenDangerAPI, rectificationRateAPI, rectificationRateMonthAPI, dangerReportsAPI } from "@/utils/shuiwu/api";

const yinhuan_value = ref(0);
const zongshu_value = ref(0);
const wancheng_value = ref(0);
const num_value = ref(0);
const totalNum = ref(0);
const online = ref(42)
const offline = ref(0)
const onlinePercent = computed(() => (42 / 42) * 100)
const offlinePercent = computed(() => (0 / 42) * 100)

onMounted(() => {
  const xName = ["20241231", "20250131", "20250228", "20250331", "20250430", "20250521", "20241231", "20250131", "20250228", "20250331", "20250430", "20250522"]
  const data1 = [50, 50, 0, 0, 0, 0, 50, 50, 0, 0, 0, 0]
  const data2 = [] as number[];
  drawSafeMonth(xName, data1, data2);
  getSafeRisk(); //安全风险
  getAQTotal();
  getAQWancheng();
  getAQWanchengMonth();
  getMonitorTotal();
});

// 安全隐患总件数
function getAQTotal() {
  totalHiddenDangerAPI().then(res => {
    if (res.data && res.data.length > 0) {
      let num = Number(res.data.slice(-1)[0].value);
      drawSafeSum(num, 100 - num);
      return;
    }
    drawSafeSum(100, 0);
  })
}

// 安全隐患整改完成率
function getAQWancheng() {
  rectificationRateAPI().then(res => {
    if (res.data && res.data.length > 0) {
      let num = Number(res.data.slice(-1)[0].value);
      drawSafeRate(num, 100 - num);
      return;
    }
    drawSafeRate(100, 0);
  })
}

// 安全隐患整改完成率
async function getAQWanchengMonth() {
  rectificationRateMonthAPI().then(res => {
    if (res.data && res.data.length > 0) {
      let arr = res.data;
      let arr1 = ["20241231", "20250131", "20250228", "20250331", "20250430", "20250521"];
      let arr2 = [50, 50, 0, 0, 0, 0];
      for (let i = 0; i < arr.length; i++) {
        let str = arr[i].key.split("-").slice(-1)[0].split(" ")[0];
        arr1.push(str);
        arr2.push(parseInt(arr[i].value));
      }
      getAQMonth(arr1, arr2);
      return;
    }
    getAQMonth([], []);
  })
}

// 每月安全隐患整上报数量
async function getAQMonth(xname: string[], data1: number[]) {
  dangerReportsAPI().then(res => {
    if (res.data && res.data > 0) {
      let arr = res.data;
      let arr1 = [],
        arr2 = [];
      for (let i = 0; i < arr.length; i++) {
        arr2.push(parseInt(arr[i].value));
      }
      drawSafeMonth(xname, data1, arr2);
      return;
    }
    drawSafeMonth(xname, data1, []);
  })
}

// 获取左边安全风险的环图
function getSafeRisk() {
  drawSafeArea();
}

// 安全隐患总事件
function drawSafeSum(yinhuan: number, zongshu: number) {
  yinhuan_value.value = yinhuan
  zongshu_value.value = zongshu
}
// 安全隐患整改完成率
function drawSafeRate(num: number, wancheng: number) {
  num_value.value = num
  wancheng_value.value = wancheng
}
// 安全隐患整改完成率
function drawSafeMonth(xName: string[], data1: number[], data2: number[]) {

  var chartDom = document.getElementById("monthChart");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    legend: {
      show: true,
      top: "5%",
      right: "10%",
      textStyle: {
        color: "#fff",
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      top: "20%",
      bottom: "10%",
    },
    color: ["#FFD15C"],
    xAxis: {
      type: "category",
      data: xName,
      axisLabel: {
        color: "#DADADA",
        fontSize: 11,
      },
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "rgba(255, 255, 255, 0.50)",
        fontSize: 10,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        lineStyle: {
          color: "rgba(255, 255, 255, 0.50)",
          width: 1,
          type: "dashed",
        },
      },
    },
    series: [
      {
        color: "#FFD15C",
        data: data1,
        type: "line",
        name: "整改完成率",
      },
      // {
      //   name: "每月安全隐患上报数量",
      //   type: "bar",
      //   barWidth: 10,
      //   color: "#1A79E8",
      //   data: data2,
      //   itemStyle: {
      //     normal: {
      //       color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      //         {
      //           offset: 0,
      //           color: "rgba(47, 199, 247, 1)",
      //         },
      //         {
      //           offset: 1,
      //           color: "rgba(108, 149, 230, 0)",
      //         },
      //       ]),
      //     },
      //   },
      // },
    ],
  };

  option && myChart.setOption(option);
}
// 安全隐患整改完成率
function drawSafeArea() {
  var chartDom = document.getElementById("areaChart");
  var myChart = echarts.init(chartDom);
  var option;
  option = {
    // tooltip: {
    //   trigger: "item",
    //   show: true,
    // },
    legend: {
      show: true,
      orient: "vertical",
      right: "0",
      top: "center",
      itemGap: 20,
      textStyle: {
        color: "#fff",
      },
    },
    color: ["#E9BD4B", "#68C9D3", "#4D97F1", "#9CBECF", "#CDE3FB"],

    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["75%", "100%"],
        right: "30%",
        top: "center",
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 5,
        },
        label: {
          fontSize: 12,
          color: "#94AABD",
          formatter: "{d}% {b}",
        },
        labelLine: {
          show: true,
        },
        data: [
          { value: 1000, name: "自动化控制区" },
          { value: 2000, name: "电气区" },
          { value: 1000, name: "水源区" },
          { value: 1000, name: "处理区" },
          { value: 1000, name: "设备区" },
        ],
      },
    ],
  };

  option && myChart.setOption(option);
}

// 登录接口
function ccswLogin() {
  let reg = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      password: "ccsw@1234",
      remember_me: false,
      username: "shuziluansheng",
    }),
  };
  return fetch("http://111.113.0.230:8066/orca/sys/login", reg)
    .then((r) => {
      if (r.status === 200) {
        return r.json();
      } else {
        return Promise.reject(r.json());
      }
    })
    .then((res) => {
      return res.result.token;
    });
}

// 获取监控总数
async function getMonitorTotal() {
  const token = await ccswLogin();
  let reg = {
    method: "GET",
    headers: {
      "x-access-token": token,
    },
  };
  fetch(
    "http://111.113.0.230:8066/orca/equipment/getGroupTotalNum?_t=1752717019&structures=&equipmentBrand=&equipmentType=1889333405330542592",
    reg
  )
    .then((r) => {
      if (r.status === 200) {
        return r.json();
      } else {
        return Promise.reject(r.json());
      }
    })
    .then((res) => {
      res.result.forEach((item: any) => {
        totalNum.value += item.total_num;
      });
    });
}
</script>
<style scoped lang="less">
// 样式引入
@import url("../styles/aqgl.less");

.screen-title-container-l1 {
  position: relative;
  display: inline-block;
}

.screen-title-text-l1 {
  position: absolute;
  top: 36%;
  left: 57%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 20px;
  text-align: center;
  white-space: nowrap;
}

.left {
  /* background-color: #ccc; */
}

.just {
  width: 100%;
  display: flex;
  height: 160px;
}

#left1 {
  width: 160px;
}

.pump {
  flex: 1;
  height: 100%;
  position: relative;
}

.pump img {
  height: 136px;
  margin-top: 10px;
}

.pump .com-shui {
  position: absolute;
  font-size: 14px;
  height: 26px;
  padding-left: 50px;
  display: flex;
  justify-content: space-between;
  width: 185px;
}

.com-shui div {
  height: 100%;
  line-height: 26px;
  color: #fff;
}

.shuizhi1 {
  /* color: #35ccff; */
  top: 15px;
  height: 100%;
  line-height: 1;
}

.shuizhi2 {
  /* color: #00efff; */
  top: 64px;
}

.erji-con {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.erji-item {
  width: 238px;
  height: 80px;
  display: flex;
}

.erji-item .img-icon {}

.erji-item-txt {
  flex: 1;
}

.erji-jinshui {
  background: url(../assets/changcheng/bengbg.png) no-repeat;
  height: 21px;
  line-height: 21px;
  font-size: 14px;
  color: #fff;
  padding-left: 7px;
  margin-top: 15px;
}

.erji-data {
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 22px;
  color: #ffeda8;
  line-height: 26px;
  text-align: left;
  font-style: normal;
  margin-top: 8px;
}

.wanhao {
  display: flex;
  height: 40px;
  border: 1px solid blue;
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 10px;
  color: #fdfeff;
  font-style: normal;
}

.wanhao-l {
  width: 160px;
  border: 1px solid blue;
}

.wanhao-r {
  flex: 1;
  border: 1px solid blue;
}

.wanhao-bg {
  background: url(../assets/changcheng/wanhaoicon.png) no-repeat;
}

.wanhao-font {
  font-family: DINAlternate, DINAlternate;
  font-weight: bold;
  font-size: 14px;
  color: #4dcdff;
  line-height: 14px;
  text-align: left;
  font-style: normal;
  margin-top: 5px;
}

.qushi {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #cae5ff;
  line-height: 18px;
  font-style: normal;
}

.qushitu {
  height: 150px;
  width: 100%;
  border: 1px solid red;
}

.shebeiweixiutu {
  height: 100%;
  border: 1px solid red;
  width: 194px;
}

.shuizhi3 {
  color: #24eacd;
  top: 114px;
}

.goto {
  position: absolute;
  top: 0;
  left: 40px;
  height: 45px;
  width: 112px;
  border-bottom: 1px solid rgb(0, 0, 255);
}

@color-online: #1fb2c2;
@color-offline: #e67d24;

.status-bar-wrapper {
  font-family: sans-serif;
  color: white;
  width: 400px;

  .legend {
    display: flex;
    font-size: 14px;
    justify-content: space-evenly;
    width: 208px;
    margin-bottom: 18px;

    .legend-item {
      display: flex;
      align-items: center;
      margin-right: 30px;

      .legend-color {
        display: inline-block;
        width: 40px;
        height: 18px;
        margin-right: 4px;
        border-radius: 4px;

        &.online {
          background-color: @color-online;
        }

        &.offline {
          background-color: @color-offline;
        }
      }
    }
  }

  .bar-container {
    position: relative;
    display: flex;
    height: 22px;
    border-radius: 8px;
    margin-bottom: 6px;

    .bar-segment {
      height: 100%;

      &.online {
        background-color: @color-online;
      }

      &.offline {
        background-color: @color-offline;
      }
    }

  }

  .bar-total {
    position: absolute;
    right: -63px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #fff;
  }

  .bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }
}

.camera-statistics {
  position: relative;

  div {
    position: absolute;
    top: 50%;
    left: 14%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 16px;
  }
}
</style>
